<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path;
%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>学生列表-云校通</title>
    <jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
    <style>
        .outer {
            width: 140px;
            height: 100px;
            /*border: 1px solid #f00;*/
            position: relative;
        }

        .inner {
            position: absolute;
            display: inline-block;
            left: 50%;
            right: -50%;
            top: 50%;
            transform: translate(-50%, -50%);
            /*border: 1px solid #777;*/
            text-align: center;
        }
    </style>
</head>
<body ontouchstart class="js-jf">
<div class="weui_tab tab-bottom">
    <div class="weui-header bg-blue">
        <div class="weui-header-left"><a onclick="back()" href="javascript:" class="icon icon-109 f-white">返回</a></div>
        <h1 class="weui-header-title">学生列表</h1>
    </div>
    <div class="searchbar_wrap" style="padding: 5px 0;"></div>
    <div id="search-content" style="height: 100%;z-index: 10;position:relation;display: none;">
        <div class="sb-content" style="overflow:scroll;">
        </div>
    </div>
    <div class="weui_tab_bd">
        <div class="weui_cells weui_cells_access mt0">
            <div class="weui_cell">
                <div class="weui_cell_hd">
                    <label class="weui_label">请选择班级</label>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input type="text" id="regTeacher" class="weui_input weui_input-select tr main1" value="请选择"
                           readonly="readonly">
                </div>
                <div class="weui_cell_ft"></div>
            </div>
        </div>
        <div class="weui_panel weui_panel_access" style="margin-top: 0;">
            <div class="weui_panel_bd" id="studentList">
            </div>
        </div>
    </div>
</div>
<!--弹窗-->
<div class="hide_bd1"></div>
<div class="hb_choose type2" style="top: 125px;width: 100%;left:0;">
    <div class="bj">
    </div>
</div>
<!--End弹窗-->
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
<script>
    $(function () {
        $('.searchbar_wrap').searchBar({
            cancelText: "取消",
            searchText: '请输入学生姓名',
            onfocus: function (value) {
                $("#search-content").show();
                $(".weui_panel").hide();
            },
            onblur: function (value) {
            },
            input: function (value) {
                queryItem(value);
            },
            onsubmit: function (value) {
                queryItem(value);
            },
            oncancel: function () {
                $("#search-content").hide();
                $(".weui_panel").show();
                $(".sb-content").html('');
            },
            onclear: function () {
                $(".sb-content").html('');
                $(".weui_panel").show();
            }
        });

        $("#regTeacher").click(function () {
            $(".type2").show();
            $(".hide_bd1").attr("style", "display: block;");
        })
        $(document).on("click", ".hb_choose .title>li", function (e) {
            $(this).addClass("active").siblings().removeClass("active");
            $(".yng").hide();
            $("#" + $(this).attr("data-key")).show();
        });
        $(document).on("click", ".list_3 .list_c3", function (e) {
            $("#regTeacher").val($(this).attr("data-name"));
            var dataValue = $(this).attr("data-value");
            $("#regTeacher").attr("data-value", dataValue);
            $(".type2").hide();
            $(".hide_bd1").attr("style", "display: none;");
            $("#totalDetail").show();
            $("#studentList").html(''); //点击班级的时候先清空先前的数据再读取
            var vy = dataValue.split("-");
            loadStudentList(vy[0], vy[1]);
        });
        loadClass();
    });

    //读取学生列表
    function loadStudentList(grade, clazz) {
        var params = {
            rows: 200,
            grade: grade,
            clazz: clazz
        };
        $.ajax({
            url: basePath + "/ls/students/manage/page/query",
            type: "post",
            dataType: "json",
            data: params,
            success: function (data) {
                loadItemHtml(data);
            }
        });
    }

    /**
     * @author huhekun
     * @date 2020/1/3
     */
    function loadItemHtml(data) {
        var html = "";
        $("#studentList").html(html);   //先清一次列表
        for (var i in data.rows) {
            var itm = data.rows[i];
            html += '<div class="weui_cell">';
            html += '<div class="weui_cell_hd"><img class="circle bg-blue-b" src="<%=basePath%>/images/default.jpg" style="width:50px;margin-right:20px;display:block"></div>';
            html += '<div class="weui_cell_bd weui_cell_primary"><p>' + itm.name + '</p>';
            html += '<p style="color: #888888; font-size: 13px;">' + getGradeName1("${term.termKey}", itm.grade) + '(' + itm.clazz + ')班</p>';
            html += '</div><div class="weui_cell_ft" style="padding-top: 5px">';
            html += '<span class="ml10"><a href="<%=basePath %>/ls/score/report/studentAssess/' + itm.id + '"class="weui_btn weui_btn_mini bg-blue-b">查看</a></span>';
            html += '</div></div>';
        }
        $("#studentList").append(html);
    }

    var search = false;

    function queryItem(keyword) {
        if (!/^[\u4E00-\u9FA5]+$/.test(keyword)) return;
        if (search) return;
        search = true;
        $.ajax({
            url: basePath + "/ls/students/manage/keyword",
            type: 'POST',
            dataType: "json",
            data: {
                studentName: keyword
            },
            success: function (data) {
                search = false;
                if (data != null && data.length > 0) {
                    var html = "";
                    for (var i in data) {
                        var itm = data[i];
                        html += '<div class="weui_cell">';
                        html += '<div class="weui_cell_bd weui_cell_primary"><p>' + itm.name + '</p>';
                        html += '<p style="color: #888888; font-size: 13px;">' + getGradeName1("${term.termKey}", itm.grade) + '(' + itm.clazz + ')班</p>';
                        html += '</div><div class="weui_cell_ft">';
                        html += '<span class="ml10"><a href="<%=basePath %>/ls/score/report/studentAssess/' + itm.id + '"class="weui_btn weui_btn_mini bg-blue-b">查看</a></span>';
                        html += '</div></div>';
                    }
                    $(".sb-content").html(html);
                }
            },
            error: function (data) {
                alert("系统异常,请联系管理员");
            }
        });
    }

    function loadClass() {
        $.ajax({
            url: basePath + "/classList",
            type: 'POST',
            dataType: "json",
            success: function (data) {
                if (data != null) {
                    var html = '<ul class="title">';
                    for (var i in data) {
                        var itm = data[i];
                        if (parseInt("${isleader}") == 0 && ((parseInt("${term.termKey}") - parseInt(itm.grade)) > 3)) {
                            continue;
                        }
                        html += '<li class="' + (i == 0 ? "active " : "") + '" data-key="s' + itm.grade + '">' + itm.gradeText + '</li>';
                    }
                    html += "</ul>";
                    for (var i in data) {
                        var itm = data[i];
                        if (parseInt("${isleader}") == 0 && ((parseInt("${term.termKey}") - parseInt(itm.grade)) > 3)) {
                            continue;
                        }
                        html += '<div class="yng" id="s' + itm.grade + '"><ul class="list_3">';
                        for (var j in itm.classList) {
                            var itm1 = itm.classList[j];
                            var gradeClass = itm1.grade + "-" + itm1.clazz;
                            html += '<li><div class="weui_cell_hd list_c3 f-green" data-value="' + gradeClass + '" data-name="' + itm.gradeText + "(" + itm1.clazz + "班)" + '">\
										' + itm1.clazz + '班\
									</div></li>';
                        }
                        html += '</ul></div>';
                    }
                    $(".bj").html(html);
                    $("#s" + data[0].grade).show();
                }
            },
            error: function (data) {
            }
        });
    }
</script>
</body>
</html>